<template>
  <div>
    <textarea v-model="intro" cols="30" rows="4" placeholder="自我介绍">
    </textarea>
    <br>
    <br>
  </div>

  <select v-model="city">
    <option value="BJ">BJ</option>
    <option value="SH">SH</option>
    <option value="CQ">CQ</option>
    <option value="SZ">SZ</option>
    <option value="CD">CD</option>
  </select>
  <br>
  <br>

  <input type="radio" name="" id="" value="a" v-model="blood">A
  <input type="radio" name="" id="" value="b" v-model="blood">B
  <input type="radio" name="" id="" value="ab" v-model="blood">AB
  <input type="radio" name="" id="" value="o" v-model="blood">O

  <br>
  <br>
  <input type="checkbox"  :checked="isAgree">是否同意用户协议
  <br>
  <br>

  <input type="checkbox" v-model="hobby" value="LQ">篮球
  <input type="checkbox" v-model="hobby" value="ZQ">足球
  <input type="checkbox" v-model="hobby" value="YMQ">羽毛球
  <input type="checkbox" v-model="hobby" value="PPQ">乒乓球
  <input type="checkbox" v-model="hobby" value="PQ">排球
</template>

<script setup>
  import { ref } from 'vue'
  const intro = ref('')
  const city = ref('SH')
  const blood = ref('o')
  const isAgree = ref(true)
  const hobby = ref(['LQ','PQ'])
</script>

<style>

</style>